<template>
  <div class="ZD-box">
    <title1 tit="我的订单"></title1>
    <!-- <van-card
  desc="查看 家具, 家电, 等订单"
  title="租房 "
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>

<van-card
  num="2"
  price="2.00"
  desc="商城"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/> -->
    <div class="card" v-for="item in shoplist" :key="item.id">
      <div class="left">
        <div class="top">
          <img src="../../../assets/shopcartimg/1.jpg" alt="" />
        </div>
        <div class="bottom">买家已付款</div>
      </div>
      <div class="right">
        <div>{{ item.name }}</div>
        <div>{{ item.dis1 }}</div>
        <div>{{ item.dis2 }}</div>
        <div class="money">
          {{ item.price }}
        </div>
        <div class="data">购买时间 ： 2017/12/13</div>
        <div class="button">
          <div>提醒发货</div>
          <div>联系商家</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
import { getlist } from "../../../api/index";
export default {
  data() {
    return {
      shoplist: [],
    };
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Mine" });
    },
    async init() {
      let obj = await getlist({
        userId: this.$store.state.userId,
      });
      console.log(obj.data.data);
      this.shoplist = obj.data.data;
    },
  },

  created() {
    this.init();
  },
};
</script>

<style lang='less' scroped>
.ZD-box {
  background-color: rgb(241, 241, 241);
  height: 100%;
  .card {
    width: 710px;
    height: 250px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    margin-top: 20px;
    border-radius: 10px;
    .left {
      float: left;
      .top {
        img {
          width: 220px;
          height: 175px;
        }
      }
      .bottom {
        font-size: 15px;
      }
    }
    .right {
      float: left;
      width: 430px;
      margin-left: 20px;
      font-size: 18px;
      .data {
        margin-top: 20px;
      }
      .money {
        color: red;
        margin-bottom: -10px;
      }
      .button {
        width: 100%;
        div {
          margin-top: 10px;
          float: right;
          width: 106px;
          text-align: center;
          line-height: 28px;
          height: 28px;
          margin-left: 15px;
          font-size: 20px;
          border: 1px solid #000;
        }
      }
    }
  }
}
</style>